<template>
  <!-- <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/> -->
<div class="box">
  <div class="top">
   <!-- <a href="/search"> -->
    <van-search
  v-model="value"
  shape="round"
  background="red"
  placeholder="请输入搜索关键词"
/>

   <!-- </a>  -->
   
  </div>
  <div class="center">
    <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
  <van-swipe-item>
    <img src="@/assets/5.jpg" alt="" style="width: 100%;height:31.25rem;">
  </van-swipe-item>
  <van-swipe-item>
    <img src="@/assets/8.jpg" alt="" style="width: 100%;height:31.25rem;">
  </van-swipe-item>
  <van-swipe-item>
    <img src="@/assets/9.jpg" alt="" style="width: 100%;height:31.25rem;">

  </van-swipe-item>
  <van-swipe-item>
    <img src="@/assets/10.jpg" alt="" style="width: 100%;height:31.25rem;">
  </van-swipe-item>
</van-swipe>
<h1>猜你喜欢</h1>
<img src="@/assets/11.jpg" alt="" style="width: 43.75rem;height: 31.25rem;    margin:  1.25rem;" >
<img src="@/assets/15.jpg" alt="" style="width: 43.75rem;height:31.25rem;    margin: 1.25rem;">
  </div>
 <div class="footer">
  <van-tabbar v-model="active">
  <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
  <van-tabbar-item icon="search" to="/fen">分类</van-tabbar-item>
  <van-tabbar-item icon="friends-o" to="/going">购物车</van-tabbar-item>
  <van-tabbar-item icon="setting-o" to="wo">我的</van-tabbar-item>
</van-tabbar>


 </div>
 <router-view/>
</div>
</template>


<script setup>
import axios from '@/utils/resquest.js'

const value=()=>{
  
}
</script>


<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
.html,body,#app,.box{
  width: 100%;
  height: 100%;
  flex: 1;
  
  .top{
  width: 100%;
  height: 3.125rem;
  background: red;
}
}
.my-swipe .van-swipe-item {
    color: #fff;
    // font-size: 20px;
    // line-height: 150px;
    text-align: center;
    width: 100%;
    height: 31.25rem;

    .img{
      width: 100%;
      height: 31.25rem;
    }
  }
</style>
